<template>
  <div class="home-activities">
    <div class="section-header">
      <h3 class="section-title">最新活动</h3>
      <el-link type="primary" @click="viewAllActivities">查看全部 <el-icon><ArrowRight /></el-icon></el-link>
    </div>
    
    <div v-if="loading" class="loading-container">
      <el-skeleton :rows="3" animated />
    </div>
    
    <div v-else-if="activities.length === 0" class="empty-container">
      <el-empty description="暂无活动" />
    </div>
    
    <div v-else class="activities-carousel">
      <el-carousel :interval="4000" type="card" height="240px">
        <el-carousel-item v-for="activity in activities" :key="activity.id" @click="viewActivityDetail(activity.id)">
          <div class="carousel-card" :style="{ backgroundImage: `url(${activity.imageUrl || defaultImage})` }">
            <div class="card-overlay">
              <div class="activity-info">
                <h3 class="activity-title">{{ activity.title }}</h3>
                <div class="activity-meta">
                  <div class="meta-item">
                    <el-icon><Calendar /></el-icon>
                    <span>{{ formatDateTime(activity.startTime) }}</span>
                  </div>
                  <div class="meta-item">
                    <el-icon><Location /></el-icon>
                    <span>{{ activity.location }}</span>
                  </div>
                </div>
                <el-button size="small" type="primary" class="register-btn" @click.stop="viewActivityDetail(activity.id)">
                  查看详情
                </el-button>
              </div>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    
    <div class="activities-grid">
      <el-row :gutter="20">
        <el-col v-for="activity in regularActivities" :key="activity.id" :xs="24" :sm="12" :md="8" :lg="6">
          <el-card 
            class="activity-card" 
            shadow="hover" 
            :body-style="{ padding: '0px' }"
            @click="viewActivityDetail(activity.id)"
          >
            <img 
              :src="activity.imageUrl || defaultImage" 
              class="activity-image"
              @error="handleImageError"
            />
            <div class="activity-content">
              <h4 class="activity-title">{{ activity.title }}</h4>
              <p class="activity-desc">{{ truncateText(activity.description, 50) }}</p>
              <div class="activity-footer">
                <span class="activity-time">
                  <el-icon><Calendar /></el-icon>
                  {{ formatDateTime(activity.startTime, false) }}
                </span>
                <el-tag size="small" :type="getStatusType(activity)">
                  {{ getStatusText(activity) }}
                </el-tag>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { formatDateTime, truncateText } from '@/utils/format';
import { getActivities } from '@/api/club';
import { Calendar, Location, ArrowRight } from '@element-plus/icons-vue';

const router = useRouter();
const loading = ref(false);
const activities = ref([]);
const defaultImage = 'https://via.placeholder.com/300x150?text=活动';

// 获取轮播展示的活动
const carouselActivities = computed(() => {
  return activities.value.slice(0, 5);
});

// 获取网格展示的活动
const regularActivities = computed(() => {
  return activities.value.slice(0, 8);
});

// 获取活动状态类型
const getStatusType = (activity) => {
  const now = new Date();
  const startTime = new Date(activity.startTime);
  const endTime = new Date(activity.endTime);
  
  if (endTime < now) {
    return 'info';  // 已结束
  } else if (startTime > now) {
    return 'primary';  // 未开始
  } else {
    return 'success';  // 进行中
  }
};

// 获取活动状态文本
const getStatusText = (activity) => {
  const now = new Date();
  const startTime = new Date(activity.startTime);
  const endTime = new Date(activity.endTime);
  
  if (endTime < now) {
    return '已结束';
  } else if (startTime > now) {
    return '未开始';
  } else {
    return '进行中';
  }
};

// 查看活动详情
const viewActivityDetail = (id) => {
  router.push(`/club/detail/${id}`);
};

// 查看所有活动
const viewAllActivities = () => {
  router.push('/club/list');
};

// 处理图片加载错误
const handleImageError = (e) => {
  e.target.src = defaultImage;
};

// 获取活动列表
const fetchActivities = async () => {
  loading.value = true;
  try {
    const params = {
      page: 0,
      size: 8,
      sortBy: 'startTime',
      direction: 'desc'
    };
    
    const res = await getActivities(params);
    activities.value = res.activities || [];
  } catch (error) {
    console.error('获取活动列表失败', error);
    activities.value = [];
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  fetchActivities();
});
</script>

<style scoped>
.home-activities {
  margin-top: 30px;
  margin-bottom: 30px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-title {
  margin: 0;
  font-size: 1.5rem;
  color: #303133;
}

.loading-container, .empty-container {
  padding: 20px 0;
  text-align: center;
}

.activities-carousel {
  margin-bottom: 30px;
}

.carousel-card {
  height: 100%;
  background-size: cover;
  background-position: center;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
}

.card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
  border-radius: 0 0 6px 6px;
}

.activity-info {
  color: white;
}

.activity-title {
  margin: 0 0 10px 0;
  font-size: 1.2rem;
}

.activity-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.9rem;
}

.register-btn {
  margin-top: 10px;
}

.activities-grid {
  margin-top: 30px;
}

.activity-card {
  height: 100%;
  cursor: pointer;
  transition: transform 0.3s;
}

.activity-card:hover {
  transform: translateY(-5px);
}

.activity-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.activity-content {
  padding: 12px;
}

.activity-title {
  margin: 0 0 8px 0;
  font-size: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-desc {
  margin: 0 0 10px 0;
  font-size: 0.875rem;
  color: #606266;
  height: 40px;
  overflow: hidden;
}

.activity-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.activity-time {
  font-size: 0.875rem;
  color: #909399;
  display: flex;
  align-items: center;
  gap: 5px;
}

@media (max-width: 768px) {
  .activities-grid .el-col {
    margin-bottom: 20px;
  }
}
</style> 